<template>
  <div class="role-list-wrapper">
    <el-input
      class="search-input"
      v-model="searchParams.roleName"
      placeholder="请输入角色名称"
      :suffix-icon="Search"
      @keyup.enter="initTableList"
    ></el-input>
    <div class="list">
      <div class="list-title">
        系统角色
        <el-button type="primary" link @click="handleAdd('新增角色')"
          ><el-icon><CirclePlusFilled /></el-icon
        ></el-button>
      </div>
      <div
        class="list-item"
        :class="{ active: item.pkid === activeRole }"
        v-for="(item, index) of systemListData"
        :key="index"
        @click="handleChangerole(item)"
      >
        {{ item.roleName }}
        <span>
          <el-button type="primary" link @click="handleEdit(item, '编辑角色')"
            ><el-icon><Edit /></el-icon
          ></el-button>
          <el-button type="danger" link @click="handleDelete(item)"
            ><el-icon><Delete /></el-icon
          ></el-button>
        </span>
      </div>
      <!-- <div class="list-title">OA同步角色</div>
      <div
        class="list-item"
        :class="{ active: item.pkid === activeRole }"
        v-for="(item, index) of oaListData"
        :key="index"
        @click="handleChangerole(item)"
      >
        {{ item.name }}
      </div> -->
    </div>
    <AddDialog ref="addRef" :detail="currentDetail" @close="handleClose" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ArrowRight, ArrowLeft, Search } from '@element-plus/icons-vue'
import { getRoleList, roleDelete } from '@/api/manager/systemManage/role.js'
import { Edit, Delete, CirclePlusFilled } from '@element-plus/icons-vue'
import AddDialog from './add.vue'
const searchParams = ref({
  roleName: '',
})
const isOpen = ref(true)
const systemListData = ref([])
const oaListData = ref([])
const initTableList = async () => {
  const res = await getRoleList({
    pageIndex: 1,
    pageSize: 9999,
    ...searchParams.value,
  })
  systemListData.value = res.data.list
  if (systemListData.value.length > 0 && !activeRole.value) {
    handleChangerole(systemListData.value[0])
  }
  // const res1 = await getRoleList({
  //   pageIndex: 1,
  //   pageSize: 9999,
  //   ...searchParams.value,
  //   type: 0,
  // })
  // oaListData.value = res1.data.list
}
const emit = defineEmits(['change'])
const activeRole = ref('')
const handleChangerole = (val) => {
  activeRole.value = val.pkid
  emit('change', activeRole.value)
}
const addRef = ref()
const currentDetail = ref()
const handleAdd = (title, row) => {
  addRef.value.dialogVisible = true
  currentDetail.value = { ...row }
  addRef.value.title = title
}
const handleEdit = (row, title) => {
  addRef.value.dialogVisible = true
  addRef.value.title = title
  currentDetail.value = { ...row }
}
const handleClose = (isload) => {
  currentDetail.value = {}
  if (isload) {
    initTableList(1)
  }
}
// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm('是否确定删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const params = { pkid: row.pkid }
      const res = await roleDelete(params)
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        initTableList()
      } else {
        ElMessage.error(res.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}
onMounted(() => {
  initTableList(1)
})
</script>
<style lang="scss" scoped>
.role-list-wrapper {
  height: 100%;
  margin-right: 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
  border-radius: 4px;
  box-sizing: border-box;
  padding: 20px;
  .search-input {
    width: 100%;
    margin-bottom: 20px;
  }
  .list {
    width: 220px;
    height: calc(100% - 48px);
    overflow-y: auto;
    &-title {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding: 0 0 0 10px;
      font-size: 14px;
      line-height: 14px;
      font-weight: 500;
      color: #151515;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &::before {
        content: ' ';
        position: absolute;
        width: 4px;
        height: 16px;
        background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
        border-radius: 2px;
        top: 8px;
        left: 0px;
      }
    }
    &-item {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding-left: 10px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 5px;
      &.active {
        background-color: #e2ebfd;
        color: #507fef;
      }
    }
  }
}
</style>
